@import "grids";
@import "compass/css3/images";


// Specify the color of the background grid.
$zen-grid-color           : #ffdede             !default;

// Specify which set of numbers to display with the background grid. Can be set
// to: both, top, or none.
$zen-grid-numbers         : both                !default;

// Create an image set of 25 numbers for the grid using data URIs. Users who are
// crazy enough to use a 26-column grid or larger are free to extend this set.
$zen-grid-number-images   : ()                  !default;

// If the set is empty, add our default set of 25.
@if length($zen-grid-number-images) == 0 {
  // The number 1.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 2.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 3.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 4.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 5.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 6.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 7.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 8.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 9.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 10.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 11.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 12.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 13.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 14.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 15.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 16.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 17.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 18.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 19.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 20.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 21.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 22.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 23.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 24.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
  // The number 25.
  $zen-grid-number-images       : append($zen-grid-number-images, url(''));
}


//
// Add a grid to an element's background.
// @see http://zengrids.com/help/#zen-grid-background
//
@mixin zen-grid-background(
  $column-count         : $zen-column-count,
  $gutter-width         : $zen-gutter-width,
  $grid-width           : $zen-grid-width,
  $grid-color           : $zen-grid-color,
  $grid-numbers         : $zen-grid-numbers,
  $reverse-all-floats   : $zen-reverse-all-floats
) {

  // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
  // stops, so we can't express the columns as 20% + 10px. Instead we are going
  // to divide all our columns in half and into 2 groups: one group for the left
  // halves of the columns and one group for the right halves. Then we'll use
  // background position to shift the left halves over to the right by a half
  // gutter width and shift the right halves over to the left by a half gutter
  // width and just let the two sets of gradients overlap in the middle. Easy.

  $bg-images            : ();
  $left-half-gradient   : ();
  $right-half-gradient  : ();

  // Calculate half of the unit width.
  $half-unit-width      : zen-unit-width(2 * $column-count, $grid-width);

  // Determine the float direction.
  $dir                  : left;
  @if $reverse-all-floats {
    $dir                : zen-direction-flip($dir);
  }

  @for $count from 1 through $column-count {
    // First add the grid numbers to the background images list.
    $position: (2 * $count - 1) * $half-unit-width;
    $reverse-count: $column-count + 1 - $count;

    @if $dir == left {
      @if $grid-numbers == both or $grid-numbers == top {
        $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position top no-repeat, comma);
      }
      @if $grid-numbers == both {
        $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position bottom no-repeat, comma);
      }
    }
    @else {
      @if $grid-numbers == both {
        $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position bottom no-repeat, comma);
      }
      @if $grid-numbers == both or $grid-numbers == top {
        $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position top no-repeat, comma);
      }
    }

    // Next, build the color stops for the left halves of the column gradients.
    @if $count > 1 {
      $stop: (2 * $count - 2) * $half-unit-width;
      $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
      $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
    }

    $stop: (2 * $count - 1) * $half-unit-width;
    $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
    $left-half-gradient: append($left-half-gradient, transparent $stop, comma);

    // Next, build the color stops for the right halves of the column gradients.
    $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
    $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);

    @if $count < $column-count {
      $stop: (2 * $count) * $half-unit-width;
      $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
      $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
    }
  }

  // Last, add the gradient halves to the background images list.
  $bg-images  : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutter-width) top no-repeat, comma);
  $bg-images  : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutter-width))) top no-repeat, comma);

  // Apply the full list of background images.
  @include background($bg-images);
}
